
<article class="gymSelect">
	<label class="gymName">地区或门店：</label>
	<input type="search" name="gymName" placeholder="请选择要查询的门店名称，可简短输入文字后从下拉列表中模糊匹配"  list="gymName">
	<datalist id="gymName"></datalist>
	<button id="btn_gymName">查询</button>
	
</article>
<article class="charts hidden">
	<div class="gymTitle"><span class="gymName"></span><span class="all_users"></span></div>
	<div class="line flex_rb">
		<section class="userSex"> 

			<aside class="chartTitle">性别</aside>
			<div class="sexIcon flex_rr"><img src="img/male.png"><img src="img/female.png"></div>
			<div class="flex_rr"><div id="male_percent">男性：%</div><div id="female_percent">女性：%</div></div>
			<div class="percent_line"><div class="first_percent"></div></div>
			<div class="percent_data flex_rr"><div id="male_count">人</div><div id="female_count">人</div></div>

		</section>
		<section class="userBMI">
			<aside class="chartTitle">BMI</aside>
			<div class="line flex_rr">
				<div class="bmi_bom"><div id="bmi1">人</div><div class="bom1"></div>	</div>
				<div class="bmi_data flex_cb"><div>偏瘦</div><div>BMI≤18.4</div><div id="bmir1">占比：%</div></div>
				<div class="bmi_bom"><div id="bmi2">人</div><div class="bom2"></div>	</div>
				<div class="bmi_data flex_cb"><div>正常</div><div>18.5≤BMI≤23.9</div><div id="bmir2">占比：%</div></div>
			</div>
			<div class="line flex_rr">
				<div class="bmi_bom"><div id="bmi3">人</div><div class="bom3"></div>	</div>
				<div class="bmi_data flex_cb"><div>偏胖</div><div>24.0≤BMI≤27.9</div><div id="bmir3">占比：%</div></div>
				<div class="bmi_bom"><div id="bmi4">人</div><div class="bom4"></div>	</div>
				<div class="bmi_data flex_cb"><div>超胖</div><div>BMI≥28.0</div><div id="bmir4">占比：%</div></div>
				
			</div>
		</section>
		<section class="userAge">
			<aside class="chartTitle">年龄</aside>
			<div class="line flex_rr">
				<div class="chart" id="userAge"></div>
				<div class="chart_data flex_rb">
					<div class="chart_data_title flex_cb">
						<div>25岁以下</div>
						<div>26~30岁</div>
						<div>31~35岁</div>
						<div>36~40岁</div>
						<div>41~45岁</div>
						<div>45岁以上</div>
					</div>
					<div class="chart_data_d flex_cb">
						<div>人</div>
						<div>人</div>
						<div>人</div>
						<div>人</div>
						<div>人</div>
						<div>人</div>
					</div>
				</div>
			</div>

			
		</section>
	</div>
	<div class="line flex_rb">
		<section class="userHeight">
			
			<div class="chart" id="userHeight"></div>
			<aside class="chartTitle">身高</aside>
		</section>
		<section class="userWeight">
			
			<div class="chart" id="userWeight"></div>
			<aside class="chartTitle">体重</aside>
		</section>	
	</div>			
</article>

